import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col, Button } from 'antd';

function Pricing0(props) {
  const { ...tagProps } = props;
  // 删除 dataSource 和 isMobile 属性
  delete tagProps.dataSource;
  delete tagProps.isMobile;
  
  return (
    <div {...tagProps} className="home-page-wrapper pricing0-wrapper">
      <OverPack component={Row} playScale={0.3} className="home-page pricing0">
        <TweenOne
          key="img"
          animation={{
            x: '-=30',
            opacity: 0,
            type: 'from',
            ease: 'easeOutQuad',
          }}
          resetStyle
          className="pricing0-img-wrapper"
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}
        >
          <span className="pricing0-img">
            <img src="/images/A_OnyWT4Nsxy0AAAAAAAAAAABjARQnAQ.png" width="100%" alt="img" />
          </span>
        </TweenOne>
        <QueueAnim
          key="text"
          type="right"
          leaveReverse
          ease={['easeOutQuad', 'easeInQuad']}
          className="pricing0-text-wrapper"
          component={Col}
          componentProps={{
            md: 12,
            xs: 24,
          }}
        >
          <div key="0" className="pricing0-title">
            OceanBase 服务器
          </div>
          <div key="1" className="pricing0-content">
            云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。按金融企业安全要求打造的完整云上安全体系，全方位保障金融应用及数据安全。<br/>500-5Gbps，10 GB-50TB（含），1TB流量包，国内按峰值。
          </div>
          <div key="2" className="pricing0-pricing">
            ¥2,200
          </div>
          <div key="3">
            <Button icon="shopping-cart" href="#" type="primary">
              立即购买
            </Button>
          </div>
        </QueueAnim>
      </OverPack>
    </div>
  );
}

export default Pricing0;
